<template>
	<view class="page apply bgf5 fs14">
		<scroll-view class="bgf5 cont " scroll-y>
			<!-- <view class="flex flexC bgff px12 mt18 mb7 mx16 r7">
				<text class="cff0">*</text>
				<view class="c66 ml2">城市</view>
				<picker class="flex1 aliR" mode="selector">
					<view class="py16">
						<text>请选择</text>
						<text class="arrowR dinline ml3"></text>
					</view>
				</picker>
			</view> -->
			
			<view class="flex flexC bgff px12 mt18 mb7 mx16 r7">
				<text class="cff0">*</text>
				<view class="c66 ml2">约球标题</view>
				<view class="flex1 aliR" >
					<view class="py16">
						<input v-model="name" placeholder="请输入您要输入的标题" />
			
						<text class="arrowR dinline ml3"></text>
					</view>
				</view>
			</view>
			<view class="flex flexC bgff px12 mt18 mb7 mx16 r7">
				<text class="cff0">*</text>
				<view class="c66 ml2">邀约门店</view>
				<view class="flex1 aliR" @click="openShopPicker">
					<view class="py16">
						<text v-if="selectShop == null">请选择</text>
						<text v-else>{{selectShop.name}}</text>

						<text class="arrowR dinline ml3"></text>
					</view>
				</view>
			</view>
			<view class="flex flexC bgff px12 mb7 mx16 r7">
				<text class="cff0">*</text>
				<view class="c66 ml2">桌台类型</view>
				<picker class="flex1 aliR" mode="selector" :range="tableTypeList" @change="tableTypeChange">
					<view class="py16">
						<text v-if="tableType == ''">请选择</text>
						<text v-else>{{tableType}}</text>
						<text class="arrowR dinline ml3"></text>
					</view>
				</picker>
			</view>
			<view class="flex flexC bgff px12 mb7 mx16 r7">
				<text class="cff0">*</text>
				<view class="c66 ml2">邀约类型</view>
				<picker class="flex1 aliR" mode="selector" :range="typeList" @change="typeChange">
					<view class="py16">
						<text v-if="type == ''">请选择</text>
						<text v-else>{{type}}</text>
						<text class="arrowR dinline ml3"></text>
					</view>
				</picker>
			</view>
			<view class="flex flexC bgff px12 mb7 mx16 r7">
				<text class="cff0">*</text>
				<view class="c66 ml2">开台时间</view>
				<view class="flex1 aliR">


					<view class="py16" @click="openDatetimePicker">
						<text v-if="startTime == ''">请选择</text>
						<text v-else>{{startTime}}</text>
						<text class="arrowR dinline ml3"></text>
					</view>
				</view>
			</view>
			<view class="flex flexC bgff px12 mb7 mx16 r7">
				<text class="cff0">*</text>
				<view class="c66 ml2">段位等级</view>
				<picker :range="levelList" class="flex1 aliR" mode="selector" @change="levelChange">
					<view class="py16">
						<text v-if="levelType == ''">请选择</text>
						<text v-else>{{levelType}}</text>
						<text class="arrowR dinline ml3"></text>
					</view>
				</picker>
			</view>
			<view class="bgff px12 mb7 r7 mx16 py16">
				<view class="flex flexC flexB fs13 c66">
					<text>备注</text>
					<tezzt>0/100</tezzt>
				</view>
				<view class="inp pt9 mb12">
					<textarea v-model="mark" maxlength="100" placeholder="请输入约球备注信息" />
				</view>
			</view>
			<view class="fs12 c99 tips mx16">
				·为了提升约球体验，约球双方需要支付预约金。到店后，从邀约记录中点击“去开台”，且支付了开台押金，即属于应约:
			</view>
			<view class="fs12 c99 tips mx16">
				·约球双方都属于应约，预约金自动退还;
			</view>
			<view class="fs12 c99 tips mx16">
				·当天未到店开台，将会扣除预约金，扣除的预约金会补偿给应约用户。
			</view>
			<view class="py6"></view>
		</scroll-view>
		<view class="flex flexC c33 w-20 bgff px15 pt12 pb30 boxS shadow">
			<view class="flex1">
				<view class="cfa">
					<text class="fs11 mr3">￥</text>
					<text class="fs21">5</text>
				</view>
				<view class="fs11 flex flexC">
					<text class="c66">预约金</text>
					<view class="c99 flex flexC ml6">
						<uni-icons type="info" size="14" color="#999"></uni-icons>
						<text class="ml2" @click="$refs.msgPop.open()">规则说明</text>
					</view>
				</view>
			</view>
			<button class="r40 fs16 bgfad px30" @click="clickAdd">提交</button>

		</view>

		<buuug7-simple-datetime-picker ref="timePicker" @submit="handleSubmit" :start-year=year :end-year=year
			:time-hide="[true, true, true, true, true, false]" :time-label="['年', '月', '日', '时', '分', '秒']" />

		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="list" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>

		<uni-popup type="center" ref="msgPop">
			<yue-pop @closeNotice="closeNotice"></yue-pop>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				levelList: ['萌新', '业余', '专业'],
				typeList: ['AA付款', '赢家付款', '输家付款'],
				year: '2024',
				tableTypeList: ['中式台球', '斯洛克'],
				tableType: '',
				levelType: '',
				type: '',
				list: [],
				selectShop: null,
				isSearch: false,
				startTime: '',
				mark: '',
				name:''

			};
		},
		onLoad() {
			this.getShopList();
		},
		methods: {

			closeNotice() {
				this.$refs.msgPop.close();
			},

			clickAdd() {
				let that = this;
				uni.requestSubscribeMessage({
					tmplIds: ['PKGHDClIKC1gIowLVzy9wi_POF1sT8kz9WNM5sP1NSw'],
					complete: (res) => {
						console.log(res)
						that.add();
					}
				});

			},

			add() {

				if (this.selectShop == null) {

					uni.showToast({
						title: "请选择店铺",
						icon: 'none'
					})
					return;
				}
				if (this.tableType == '') {

					uni.showToast({
						title: "请选择台球类型",
						icon: 'none'
					})
					return;
				}
				if (this.type == '') {

					uni.showToast({
						title: "请选择邀约类型",
						icon: 'none'
					})
					return;
				}
				if (this.startTime == '') {

					uni.showToast({
						title: "请选择预约时间",
						icon: 'none'
					})
					return;
				}
				if (this.levelType == '') {

					uni.showToast({
						title: "请选择段位等级",
						icon: 'none'
					})
					return;
				}



				let param = {
					shop_id: this.selectShop.id,
					name: this.name,
					type: this.type,
					table_type: this.tableType,
					start_time: this.startTime,
					mark: this.mark,
					level: this.levelType
				};
				let that = this;
				this.$api.yueAdd(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {


						that.wechatPay(res.data.payInfo);

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
						uni.redirectTo({
							url: '../reservation/list'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: "取消",
							icon: 'none'
						});
					}
				});
			},

			levelChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.levelType = this.levelList[e.detail.value];
			},
			tableTypeChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.tableType = this.tableTypeList[e.detail.value];
			},
			typeChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.type = this.typeList[e.detail.value];
			},

			openShopPicker() {
				this.$refs.shopPicker.open();
			},
			onClose() {
				this.$refs.shopPicker.close();
			},
			search(e) {

				this.keyword = e;
				this.getShopList();
				this.isSearch = true;
				console.info("=====search=====" + e);
			},

			getShopList() {
				let param = {
					keyword: this.keyword,
					orgId: uni.getStorageSync("orgId"),
					lat: this.lat,
					lng: this.lng
				};
				let that = this;
				this.$api.shopList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
						if (that.id == "") {
							that.selectShop = that.list[0];
						}

					} else {

					}
				})
			},
			onSelectShop(item) {
				this.selectShop = item;
				this.isSearch = false;
				this.onClose();
			},

			// 打开picker
			openDatetimePicker() {
				this.$refs.timePicker.show();
			},

			// 关闭picker
			closeDatetimePicker() {
				this.$refs.timePicker.hide();
			},

			handleSubmit(e) {
				// console.log(e);
				this.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
				// {year: "2023", month: "07", day: "11", hour: "15", minute: "21", seconds: '55'}
				// this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${seconds}`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.apply {
		.tips {
			line-height: 50rpx;
		}

		.bgfad {
			background-color: #FAD00D;
		}

		.cont {
			height: calc(100vh - 174rpx);
		}
	}
</style>